.wrap,
.x-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: @x-padding;

  &.no-padding {
    padding: 0;
  }
}

.wrap,
.x-wrap {
  overflow: hidden;

  .x-header {
    position: relative;
    height: @x-header-height;
    border-bottom: 1px dotted #DBDBDB;
  
    .x-title {
      margin-top: -5px;
    }
    .x-toolbar {
      position: absolute;
      top: -3px;
      right: 0;
      height: @x-header-height;
      font-size: 14px;
    }
  }
}

.x-wrap {
  .x-panel {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: @x-padding;
    // background-color: #F7F7F7;

    .x-panel-layout {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }

  .x-header + .x-panel {
    top: unit(unit(@x-header-height) + unit(@x-padding) - 5, px);
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: @x-margin;
    background-color: #FFFFFF;

    .x-toolbar + .x-fixed {
      top: unit(unit(@x-toolbar-height) + unit(@x-margin) * 2, px);
    }
  }

  .x-fixed {
    position: absolute;
    top: @x-padding;
    left: @x-padding;
    right: @x-padding;
    bottom: @x-padding;
  }

  .x-header + .x-fixed {
    top: unit(unit(@x-header-height) + unit(@x-padding) + unit(@x-margin), px);
    box-shadow: 0 0 7px rgba(0, 0, 0, .1);
  }

  .x-toolbar + .x-fixed {
    top: unit(unit(@x-toolbar-height) + unit(@x-padding) + unit(@x-margin), px);
  }
}

.wrap {
  padding-bottom: 0;
  overflow: auto;

  &:after {
    content: '';
    display: block;
    height: 0;
    margin-top: 20px;
  }

  .x-container {
    position: relative;
    min-height: 320px;
    margin-top: @x-margin;
  }
}